<template>
  <div class="app-container">
    <el-form :inline="true" :model="stockForm" class="demo-form-inline">

      <el-form-item label="股票名称">
        <el-select v-model="stockForm.gid" placeholder="请选择">
          <el-option v-for="item in names" :label="item.name" :value="item.gid" :key="item.gid"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>
    </el-form>

    <div className="echart" id="mychart" style="width:100%; height: 400px;"></div>
  </div>


</template>

<script>
import * as echarts from "echarts";
import {getName, getData} from "@/api/match/kLine";

export default {
  data() {
    return {
      stockForm: {
        gid: null,
        name: null,
      },
      names: [],
      xdata: [],
      seriesdata: [],//今开、当前价格、最低价格、最高价

    };
  },
  created() {
    this.getnames();
  },
  methods: {
    initEcharts() {
      const option = {
        title: {
          text: "周K图"
        },
        tooltip: {},
        legend: {},
        xAxis: {
          data: this.xdata,
        },
        yAxis: {},
        series: [
          {
            type: "candlestick",
            data: this.seriesdata,
          }
        ]
      };
      const myChart = echarts.init(document.getElementById("mychart"));
      myChart.setOption(option);
      //随着屏幕大小调节图表
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },
    getnames() {
      getName().then(resp => {
        this.names = resp.data;
      })
    },
    onSubmit() {
      getData(this.stockForm.gid).then(resp => {
        this.xdata = resp.date;
        this.seriesdata = resp.data;
        //初始图标
        this.initEcharts();
      })
    }
  }
};
</script>
<style scoped>

</style>
